<template>
    <div class="wrapper">
        <h1>PropsZi-2</h1>
        <h2>toy：{{ toy }}</h2>
        <h2>car：{{ car }}</h2>
        <button @click="callEmit">call emit</button>
    </div>
</template>

<script lang="ts" setup name="PropsZi2">

import { ref, onUnmounted } from 'vue'
let toy = ref('电脑')
defineProps(['car'])

// <!-- 第二种 my-event 自定义事件 -->
const emit = defineEmits(['my-event'])

function callEmit() {
    // 自定义事件
    emit('my-event', `from my-event: ${toy.value}`)
}


// emmiter获取数据
import emitter from '@/utils/emitter'
emitter.on('sendToy', (value: string) => {
    toy.value = value
})

onUnmounted(() => {
    emitter.off('sendToy')
})

</script>


<style scoped>
.wrapper {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    margin: 20px
}

button {
    margin: 0 5px;
}
</style>